<template>
	<view class="pageBox">
		<!--新的好友 准备套接口-->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px'}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<input type="text" 
					maxlength="12" 
					confirm-type="search" 
					placeholder-style="color: #ccc" 
					placeholder="搜索好友" 
					@search="serachSubmit"
					@custom="serachSubmit" 
					v-model="keyword" 
					focus />
				</view>
			</view>
		</view>
		
		<view class="list">
			<view class="list-item" v-for="(item, index) in dataList" :key="index">
				<image :src="item.avatar" class="avatar"></image>
				<view class="nickname text-cut">{{item.nickname || ''}}</view>
				<view class="btn-add" v-if="!item.is_f" @click="addFriend(item.id)">添加</view>
				<view class="send-message" v-if="item.is_f" 
				@click="$wanlshop.auth(`/pages/new/chat/one?id=${item.id}&nickname=${item.nickname}`)">发消息</view>
			</view>
		</view>
		
		<!-- 更多 -->
		<uni-load-more :status="status" :content-text="contentText" />
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
	components: {
		
	},
	data() {
		return {
			dataList:[
				// {
				// 	nickname:'昵称',
				// 	is_f:0,
				// 	id:10,
				// 	avatar:'/static/images/default/screen_icon_new.png',
				// }
			],
			keyword:'',
			
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'noMore',//noMore loading
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载...',
				contentnomore: ''
			}
		}
	},
	onLoad() {
		this.getList();
	},
	onShow(){
		
	},
	// 触底加载更多
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.getList();
		}
	},
	computed: {
		...mapState(['common'])
	},
	methods: {
		getList() {
			let that = this;
			this.status = 'loading';
			uni.request({
				url: '/chat/searchuser',
				data: {
					page: this.current_page,
					keywords: this.keyword,
				},
				success: res => {
					if (res.res.code === 1) {
						that.dataList = [...that.dataList, ...res.res.data.data];
						that.current_page = res.res.data.current_page; //当前页码
						that.last_page = res.res.data.last_page; //总页码
						that.status = 'more';
					}
				}
			});
		},
		serachSubmit() {
			let _this = this
			
			let searchVal =  _this.keyword;
			
			if (searchVal.trim().length) {
				_this.current_page = 1;
				_this.dataList = [];
				_this.getList();
			} else {
				uni.showToast({
					icon: 'none',
					title: '请输入您想搜索的内容',
					success() {
						_this.keyword = ''
						_this.current_page = 1;
						_this.dataList = [];
						_this.getList();
					}
				})
			}
		},
		addFriend(id){
			let that = this;
			
			uni.request({
				url: '/chat/addfriends',
				data: {
					id: id,
				},
				success: res => {
					if(res.res.code === 1){
						that.current_page = 1;
						that.dataList = [];
						that.getList();
					}
				}
			});
		}
	}
}
</script>


<style>
page{
	background-color:  #ffffff !important;	
}
</style>


<style scoped lang="scss">
.slot-wrap {
	display: flex;
	align-items: center;
	width: 90%;
}
.search-wrap {
	margin: 0 20rpx;
	flex: 1;
}

.cu-custom .search-form{
	/*border: 3rpx solid #fe6600;
	background-color: #fff;*/
}

.list{
	margin-top: 30rpx;
	
	.list-item{
		padding: 18rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.avatar{
		width: 84rpx;
		height: 84rpx;
		border-radius: 50%;
		flex-shrink: 0;
		margin-right: 24rpx;
	}
	
	.nickname{
		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 44rpx;
		flex: 1;
	}
	
	.btn-add{
		width: 108rpx;
		height: 48rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		border: 1rpx solid #9C3628;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #9C3628;
		line-height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.send-message{
		width: 108rpx;
		height: 48rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		border: 1rpx solid #4D87DF;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #4D87DF;
		line-height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
}

</style>